<template>
  <button :class="['sc-button', 'sc-reset-button', {
    'sc-button--disabled': disabled
  }]" :form-type="formType" :hover-start-time="Number(hoverStartTime)" :hover-stay-time="Number(hoverStayTime)"
    :open-type="openType" :send-message-img="sendMessageImg" :send-message-path="sendMessagePath"
    :send-message-title="sendMessageTitle" :session-from="sessionFrom" :show-message-card="showMessageCard"
    :style="[buttonStyle]" hover-class="sc-button--active" @addgroupapp="onAddgroupapp"
    @agreeprivacyauthorization="onAgreeprivacyauthorization" @chooseaddress="onChooseaddress"
    @chooseavatar="onChooseavatar" @contact="onContact" @error="onError" @getphonenumber="onGetPhoneNumber"
    @getuserinfo="onGetUserInfo" @im="onIm" @launchapp="onLaunchApp" @login="onLogin" @opensetting="onOpenSetting"
    @subscribe="onSubscribe" @tap="tapHandler">
    <slot>{{ text }}</slot>
  </button>
</template>

<script>
import { marginProps, marginStyle } from "../../libs/props/margin.js";
import { positionProps, positionStyle } from "../../libs/props/position.js";
import throttle from "../../libs/utils/throttle.js";
import mpMixin from "../../libs/mixin/mpMixin.js";
import mixin from "../../libs/mixin/mixin.js";
/**
 * @component sc-button 按钮组件
 * @property {String}         width                - 按钮宽度，支持rpx、px、%等单位
 * @property {String}         height               - 按钮高度，支持rpx、px、%等单位
 * @property {String}         round                - 按钮圆角大小，支持rpx、px等单位
 * @property {String}         bgColor              - 按钮背景颜色，支持颜色名称、十六进制、RGB等格式
 * @property {String}         border               - 按钮边框，如 "1px solid #000"
 * @property {String}         borderColor          - 边框颜色
 * @property {String}         borderWidth          - 边框宽度，支持rpx、px等单位
 * @property {String}         borderStyle          - 边框样式，如 solid、dashed、dotted等
 * @property {String|Number}  colGap               - 按钮内容间距，支持rpx、px等单位
 * @property {String}         type                 - 按钮类型，可在config中配置预设样式
 * @property {String}         text                 - 按钮文字内容
 * @property {String}         color                - 文字颜色
 * @property {String}         fontSize             - 文字大小，支持rpx、px等单位
 * @property {String}         bold                 - 文字粗细
 * @property {Boolean}        disabled             - 是否禁用按钮，默认false
 * @property {String|Number}  throttleTime         - 节流时间，单位毫秒，默认0
 * @property {Object|String}  customTextStyle      - 自定义文本样式对象
 * @property {Boolean}        loading              - 是否显示加载状态，默认false
 * @property {String}         formType             - 表单提交类型，可选值为submit、reset
 * @property {String}         openType             - 开放能力类型，如获取用户信息、手机号等
 * @property {Number}         hoverStartTime       - 按住后多久出现点击态，单位毫秒，默认0
 * @property {Number}         hoverStayTime        - 手指松开后点击态保留时间，单位毫秒，默认200
 * @property {Boolean}        hoverStopPropagation - 是否阻止点击态冒泡，默认true
 * @property {String}         lang                 - 指定返回用户信息的语言，默认en
 * @property {String}         sessionFrom          - 会话来源，openType为contact时有效（仅微信小程序）
 * @property {String}         sendMessageTitle     - 会话内消息卡片标题，open-type="contact"时有效，默认当前标题，只微信小程序有效
 * @property {String}         sendMessagePath      - 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效，默认当前分享路径，只微信小程序有效
 * @property {String}         sendMessageImg       - 会话内消息卡片图片，open-type="contact"时有效，默认当前页面截图，只微信小程序有效
 * @property {Boolean}        showMessageCard      - 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
 */

export default {
  name: 'sc-button',
  props: {
    width: {
      type: String
    },
    height: {
      type: String
    },
    round: {
      type: String
    },
    bgColor: {
      type: String
    },
    border: {
      type: String
    },
    borderColor: {
      type: String
    },
    borderWidth: {
      type: String
    },
    borderStyle: {
      type: String
    },
    colGap: {
      type: [String, Number]
    },
    type: {
      type: String
    },
    text: {
      type: String,
      default: ""
    },
    color: {
      type: String,
      default: ""
    },
    fontSize: {
      type: String,
      default: ""
    },
    bold: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    throttleTime: {
      type: [String, Number],
      default: 0
    },
    customTextStyle: {
      type: [Object, String],
      default: ""
    },
    loading: {
      type: Boolean,
      default: false
    },
    formType: {
      type: String,
      default: ""
    },
    openType: {
      type: String,
      default: ""
    },
    hoverStartTime: {
      type: Number,
      default: 0
    },
    hoverStayTime: {
      type: Number,
      default: 200
    },
    hoverStopPropagation: {
      type: Boolean,
      default: true
    },
    lang: {
      type: String,
      default: "en"
    },
    sessionFrom: {
      type: String,
      default: ""
    },
    sendMessageTitle: {
      type: String,
      default: ""
    },
    sendMessagePath: {
      type: String,
      default: ""
    },
    sendMessageImg: {
      type: String,
      default: ""
    },
    showMessageCard: {
      type: Boolean,
      default: true
    },
    ...marginProps,
    ...positionProps
  },
  mixins: [mpMixin, mixin],
  emits: ['click', 'getphonenumber', 'getuserinfo', 'error', 'opensetting', 'launchapp', 'contact', 'chooseavatar', 'addgroupapp', 'chooseaddress', 'subscribe', 'login', 'im'],
  data() {
    return {}
  },
  computed: {
    buttonStyle() {
      // 按钮类型样式
      const btnTypes = (uni.$sc.config && uni.$sc.config.button && uni.$sc.config.button.types) || {};
      const baseStyle = {
        // 按钮样式
        width: this.width && this.$sc.addUnit(this.width),
        height: this.height && this.$sc.addUnit(this.height),
        backgroundColor: this.bgColor && this.$sc.getColor(this.bgColor),
        borderRadius: this.round && this.$sc.addUnit(this.round),
        border: this.border && `${this.borderWidth} ${this.borderStyle} ${this.borderColor}`,
        columnGap: this.colGap && this.$sc.addUnit(this.colGap),

        // 按钮文本样式
        color: this.color && this.$sc.getColor(this.color),
        fontSize: this.fontSize && this.$sc.addUnit(this.fontSize),
        fontWeight: this.bold ? 'bold' : 'normal',
        ...this.customTextStyle
      };
      return this.$sc.deepMerge(btnTypes[this.type], baseStyle, marginStyle(this), positionStyle(this))
    }
  },
  methods: {
    tapHandler() {
      if (!this.disabled && !this.loading) {
        throttle(() => {
          this.$emit("click");
        }, this.throttleTime);
      }
    },
    onGetPhoneNumber(event) {
      this.$emit('getphonenumber', event.detail)
    },
    onGetUserInfo(event) {
      this.$emit('getuserinfo', event.detail)
    },
    onError(event) {
      this.$emit('error', event.detail)
    },
    onOpenSetting(event) {
      this.$emit('opensetting', event.detail)
    },
    onLaunchApp(event) {
      this.$emit('launchapp', event.detail)
    },
    onContact(event) {
      this.$emit('contact', event.detail)
    },
    onChooseavatar(event) {
      this.$emit('chooseavatar', event.detail)
    },
    onAgreeprivacyauthorization(event) {
      this.$emit('agreeprivacyauthorization', event.detail)
    },
    onAddgroupapp(event) {
      this.$emit('addgroupapp', event.detail)
    },
    onChooseaddress(event) {
      this.$emit('chooseaddress', event.detail)
    },
    onSubscribe(event) {
      this.$emit('subscribe', event.detail)
    },
    onLogin(event) {
      this.$emit('login', event.detail)
    },
    onIm(event) {
      this.$emit('im', event.detail)
    }
  }
}
</script>

<style lang="scss" scoped>
.sc-button {
  position: relative;
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  gap: 5rpx;

  &--active {
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.1);
      content: " ";
    }
  }

  &--disabled,
  &--loading {
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba(255, 255, 255, 0.3);
      content: " ";
    }
  }
}

// 去除button的所有默认样式，让其表现跟普通的 view、text 元素一样
.sc-reset-button {
  padding: 0;
  border-width: 0;
  /* #ifndef APP-PLUS */
  background-color: transparent;
  color: inherit;
  font-size: inherit;
  /* #endif */
  /* #ifdef APP-NVUE */
  line-height: inherit;
  /* #endif */
}

/* #ifndef APP-NVUE */
.sc-reset-button::after {
  border: none;
}

/* #endif */
</style>
